<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="toolbar" :class="{ 'showInfo': showInfo }">
    <ToolbarIcon
      v-for="(item, index) in config"
      :id="item.name"
      :key="index"
      :title="item.title"
      :name="item.name"
      :type="item.type"
      :imgSrc="item.imgSrc"
      :selected="item.selectable && item.name == selectedTool ? true : false"
      @on-click="item.selectable ? handleOnClick($event, true) : handleOnClick($event, false)"
    />
  </div>
</template>
<script>
import ToolbarIcon from './ToolbarIcon.vue';
export default {
  name: 'Toolbar',
  components: {
    ToolbarIcon
  },
  props: {
    config: {
      type: Array,
      default: () => []
    },
    selectedTool: {
      type: String,
      default: ''
    },
    showInfo: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleOnClick(name, updateSelection) {
      if (updateSelection) {
        this.$emit('update:selectedTool', name);
      }
      this.$emit('on-click', name);
    }
  }
};
</script>
<style lang="scss" scoped>
.toolbar {
  display: flex;
  // position: absolute;
  background-color: #bdbdbd;
  justify-content: center;
  width: 100%;
}
.showInfo{
  width: calc(100% - 200px);
}
</style>